<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <title>打工仔你好！！！</title>
    <style>
        :root { --primary: #4361ee; --primary-light: #7209b7; --secondary: #f72585; --accent: #4cc9f0; --text-dark: #1a202c; --text-light: #f8f9fa; --background: #f0f4f8; --card-bg: #ffffff; --shadow: 0 6px 16px rgba(0,0,0,0.08); --shadow-hover: 0 12px 24px rgba(0,0,0,0.15); --gradient: linear-gradient(135deg, #4361ee 0%, #7209b7 50%, #f72585 100%); }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', 'Segoe UI', 'Microsoft YaHei', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: var(--background); color: var(--text-dark); line-height: 1.6; }
        .page-header { text-align: center; margin: 30px auto; padding: 35px; background: var(--gradient); border-radius: 20px; color: white; box-shadow: 0 10px 30px rgba(0,0,0,0.15); max-width: 800px; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.page-header::after { content: ''; position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; background: rgba(255,255,255,0.08); border-radius: 50%; }
        .page-title { font-size: 2.5rem; margin-bottom: 12px; font-weight: 800; letter-spacing: -0.8px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .page-subtitle { font-size: 1.2rem; opacity: 0.95; font-weight: 300; letter-spacing: 0.5px; }
        .container { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; justify-content: center; margin: 40px auto; }
        .content { flex: 1; min-width: 300px; max-width: 680px; }
        .image-container { flex: 0 0 340px; text-align: center; animation: fadeIn 0.8s ease-out; padding: 20px; background: white; border-radius: 20px; box-shadow: var(--shadow); }
        .stat-card { background: linear-gradient(145deg, white, #f8f9fa); padding: 25px; margin: 18px 0; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.05), 0 3px 6px -4px rgba(0,0,0,0.1); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 6px solid var(--primary); overflow: hidden; position: relative; animation: fadeIn 0.5s ease-out forwards; opacity: 0; }
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.2s; }
.stat-card:nth-child(3) { animation-delay: 0.3s; }
.stat-card:nth-child(4) { animation-delay: 0.4s; }
.stat-card:nth-child(5) { animation-delay: 0.5s; }
.stat-card:nth-child(6) { animation-delay: 0.6s; }
        .stat-card::before { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 80px; background: rgba(67, 97, 238, 0.05); border-radius: 0 0 0 50px; }
        .stat-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-left-color: var(--accent); }
        .stat-value { font-size: 2.2rem; font-weight: 800; margin-bottom: 8px; color: var(--primary); letter-spacing: -0.5px; opacity: 0; transform: translateY(10px); animation: fadeInUp 0.6s ease-out forwards; }
        .stat-label { font-size: 1.1rem; color: #4a5568; font-weight: 500; }
        img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); margin: 15px auto; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: translateY(5px); }
        .image-container:hover img { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 35px rgba(0,0,0,0.2); }
        @media (max-width: 768px) { .container { flex-direction: column; gap: 20px; } .image-container { order: -1; flex: 0 0 300px; padding: 15px; } .page-title { font-size: 2rem; } .stat-card { padding: 20px; margin: 15px 0; } .page-header { padding: 25px 20px; margin: 20px auto; } }
        @media (max-width: 480px) { .page-title { font-size: 1.8rem; } .stat-value { font-size: 1.8rem; } .image-container { flex: 0 0 260px; } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
        .stat-card:nth-child(even) { border-left-color: var(--secondary); }
        .stat-card:nth-child(even)::before { background: rgba(247, 37, 133, 0.05); }
        .highlight { font-weight: 700; color: var(--primary); text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 2px; text-underline-offset: 6px; }
        .stat-metric { display: flex; justify-content: space-between; align-items: center; }
        .trend-indicator { font-size: 0.9rem; padding: 4px 10px; border-radius: 20px; background: rgba(76, 201, 240, 0.1); color: var(--accent); font-weight: 600; }
    </style>
</head>
<body>
<div class="page-header">
    <h1 class="page-title">打工仔你好！！！</h1>
    <p class="page-subtitle">智能考勤工时统计系统</p>
</div>
<div class="container">
    <div class="content">
        <div class="stat-card">
            <div class="stat-value" th:text="${result}"></div>
            <div class="stat-label">本月总时长</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" th:text="${result2}"></div>
            <div class="stat-label">本月有效出勤天数</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" th:text="${result3}"></div>
            <div class="stat-label">本月平均工时</div>
        </div>
        <div class="stat-card">
            <div class="stat-value" th:text="${result4}"></div>
            <div class="stat-label">本月剩余工作日</div>
        </div>
        <div class="stat-card">
            <div class="stat-metric">
                <div class="stat-value" th:text="${result5}"></div>
                <span class="trend-indicator">目标</span>
            </div>
            <div class="stat-label">预期工作时长</div>
        </div>
        <div class="stat-card" th:if="${juanWang}">
            <div class="stat-value" th:text="${result6}"></div>
            <div class="stat-label">卷王评价</div>
        </div>
    </div>
    <div class="image-container" th:if="${juanWang}">
        <img th:src="@{/卷王_better.svg}" alt="卷王称号"/>
        <div class="stat-label">恭喜达成卷王成就！</div>
    </div>
</div>
</body>
</html>